<script setup>
import {ref, inject} from 'vue'
import {onLoad} from '@dcloudio/uni-app';

const isMiniProgram = inject('isMiniProgram');


const title = ref('');
const id = ref('')


onLoad((option) => {
  title.value = option.title;
  id.value = option.id
})

const leftClick = () => {
  uni.navigateBack()
}

const items = [
  {
    id: 1,
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
    title: '我们何以不同 | 于理解读',
    content: '用人格心理学，回答人生三问,用人格心理学，回答人生三问,用人格心理学，回答人生三问',
    mouth: 9,
    day: 29,
    type: 0
  },
  {
    id: 1,
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
    title: '我们何以不同 | 于理解读',
    content: '用人格心理学，回答人生三问,用人格心理学，回答人生三问,用人格心理学，回答人生三问',
    mouth: 9,
    day: 29,
    type: 1,
    number: 5.5
  }
]
</script>
<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view style="width: 160rpx;">{{ title }}</view>
      <view :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" class="lable-box">
        <div class="top-img">
          <image class="image-top" src="/static/index/top-lable.svg"/>
        </div>
        <text>{{ id == 1 ? '我的提示词' : id == 2 ? '我的画图' : id == 3 ? '我做的视频' : '无效的ID' }}</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="AI_content">
    <view class="sreach-box">
      <fui-icon :size="30" color="#999999" name="search"></fui-icon>
      <text>请输入需要搜索的课程</text>
    </view>
    <view v-for="(item, index) in items" :key="index" class="item_box">
      <image :src="item.image" class="item_image"/>
      <view class="item_content">
        <view class="content_title">{{ item.title }}</view>
        <view class="content_con">{{ item.content }}</view>
        <view v-if="item.type === 0"
              style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 20rpx;">
          <view style="font-size: 24rpx;color: rgba(153, 153, 153, 1);">{{ item.mouth }}月{{ item.day }}日上架</view>
          <view class="type_btn">上架提醒</view>
        </view>
        <view v-else style="font-size: 24rpx;color: rgba(246, 112, 28, 1);">{{ item.number }}万次学习 / 免费试听</view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lable-box {
    width: 212rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;

    .top-img {
      margin: 0 10rpx 0 35rpx;

      .image-top {
        width: 36rpx;
        height: 36rpx;
      }
    }

    text {
      font-size: 25rpx;
      color: #666666;
    }
  }
}

.AI_content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;

  .sreach-box {
    width: 670rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      width: 80%;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .item_box {
    margin: 20rpx;
    width: 670rpx;
    height: 266rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item_image {
      width: 200rpx;
      height: 100%;
      border-radius: 24rpx;
    }

    .item_content {
      width: 550rpx;
      height: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .content_title {
        font-size: 28rpx;
        font-weight: 600;
      }

      .content_con {
        font-size: 24rpx;
        color: rgba(153, 153, 153, 1);
      }

      .type_btn {
        width: 144rpx;
        height: 58rpx;
        background: rgba(246, 112, 28, 0.1);
        color: rgba(246, 112, 28, 1);
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999999rpx;
      }
    }
  }
}
</style>